<template>
  <div class="mainDiv">
    <el-container class="main_container">
      <el-main>
        <el-form ref="form" :model="form" :rules="rules" label-width="150px">
        <el-row :gutter="15">
          <el-col :span="16">
              <el-row :gutter="15">
                <!-- el-col :span="12">
                  <el-form-item label="上级仓库" prop="parentId">
                    <treeselect v-model="form.parentId" :options="storeOptions" :normalizer="normalizer" placeholder="选择上级仓库" />
                  </el-form-item>
                </el-col> -->
                <el-col :span="12">
                  <el-form-item label="名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入仓库名称" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="联系电话" prop="tel">
                    <el-input v-model="form.tel" placeholder="请输入联系电话" />
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- <el-row :gutter="15">
                <el-col :span="12">
                  <el-form-item label="仓库代码" prop="storeCode">
                    <el-input v-model="form.storeCode" placeholder="请输入仓库代码" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="仓库编号" prop="storeNo">
                    <el-input v-model="form.storeNo" placeholder="请输入仓库编号" />
                  </el-form-item>
                </el-col>
              </el-row> -->

              <el-row :gutter="15">
                <el-form-item
                  prop="provinceCode"
                  label="省/市/区/县"
                  size="small"
                >
                  <el-col :span="8">
                    <el-select
                      v-model="form.provinceCode"
                      @change="getAreaList($event, 2)"
                      filterable
                      placeholder="省"
                    >
                      <el-option
                        v-for="item in provinceOptions"
                        :key="item.areaId"
                        :label="item.areaName"
                        :value="item.areaId"
                        :disabled="item.status == 1"
                      ></el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="8">
                    <el-select
                      v-model="form.cityCode"
                      @change="getAreaList($event, 3)"
                      filterable
                      placeholder="市"
                    >
                      <el-option
                        v-for="item in cityOptions"
                        :key="item.areaId"
                        :label="item.areaName"
                        :value="item.areaId"
                        :disabled="item.status == 1"
                      ></el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="8">
                    <el-select
                      v-model="form.areaCode"
                      filterable
                      placeholder="区"
                    >
                      <el-option
                        v-for="item in areaOptions"
                        :key="item.areaId"
                        :label="item.areaName"
                        :value="item.areaId"
                        :disabled="item.status == 1"
                      ></el-option>
                    </el-select>
                  </el-col>
                </el-form-item>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="地址" prop="address">
                    <amap-input
                      placeholder="请输入地址"
                      v-model="form.address"
                      @getPosition="getPosition"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="15">
                <el-col>
                  <el-form-item label="管理部门" prop="deptId">
                    <treeselect
                      v-model="form.deptId"
                      :options="deptOptions"
                      :show-count="true"
                      placeholder="管理部门"
                      style="width: 100%"
                      size="small"
                    />
                  </el-form-item>
                </el-col>

              </el-row>
              <el-row :gutter="15">
                <el-col :span="12">
                  <el-form-item label="管理员" prop="userId">
                   <el-select v-model="form.userId" placeholder="请选择管理员" style="width: 100%">
                     <el-option
                       v-for="item in userOptions"
                       :key="item.userId"
                       :label="item.nickName"
                       :value="item.userId"
                     />
                   </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="仓库级别" prop="type">
                    <el-select v-model="form.type" placeholder="请选择仓库级别">
                      <el-option v-for="dict in dict.type.wms_store_type" :key="dict.value" :label="dict.label"
                        :value="dict.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="15">
                <el-col :span="12">
                  <el-form-item label="经度" prop="lng">
                    <el-input v-model="form.lng" placeholder="请输入经度" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="纬度" prop="lat">
                    <el-input v-model="form.lat" placeholder="请输入纬度" />
                  </el-form-item>
                </el-col>
              </el-row>
             <!-- <el-row>
                <el-col :span="12">
                  <el-form-item label="状态" prop="status">
                    <el-select v-model="form.status" placeholder="请选择状态">
                      <el-option v-for="dict in dict.type.sys_common_status" :key="dict.value" :label="dict.label"
                        :value="dict.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row> -->
          </el-col>
          <el-col :span="8">
            <amap-select-point :selectLon="selectLon" :selectLat="selectLat" :fence="form.fence" @clickCallback="clickMap"/>
          </el-col>
        </el-row>
        </el-form>
      </el-main>
      <el-footer>
        <div class="footerDivClass">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="close()">取 消</el-button>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
  import {
    listStore,
    getStore,
    delStore,
    addStore,
    updateStore,listStoreExcludeChild,storeTreeselect
  } from "@/api/wms/store";
import {listUser} from "@/api/system/user"
import { listSysArea } from "@/api/system/sysArea";
import { options } from "@/api/system/sysTag";
import AmapInput from "@/components/AmapInput";
import AmapSelectPoint from "@/components/AmapSelectPoint";
import AmapDrawFence from "@/components/AmapDrawFence";
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  dicts: ["glo_status",'sys_common_status','wms_store_type'],
  components: { Treeselect, AmapInput, AmapSelectPoint,AmapDrawFence },
  created() {
    this.reset();
    this.getTreeselect();
    this.getUsers();
    this.getAreaList(0, 1);
    const id = this.$router.currentRoute.params.id;
    const parentId = this.$route.query.parentId;
    if (null != id && "" != id && undefined != id) {
      getStore(id).then((response) => {
        this.form = response.data;
        this.form.provinceCode = parseInt(this.form.provinceCode);
        this.form.cityCode = parseInt(this.form.cityCode);
        this.form.areaCode = parseInt(this.form.areaCode);

        this.getAreaList(0, 1);
        this.getAreaList(this.form.provinceCode, 2);
        this.getAreaList(this.form.cityCode, 3);
        this.getAreaList(this.form.areaCode, 4);
        this.selectLon = this.form.lng;
        this.selectLat = this.form.lat;

        this.form.type = response.data.type.toString();
      });
      listStoreExcludeChild(id).then(response => {
        this.storeOptions = this.handleTree(response.data, "id");
      });
    }else{
      listStore(this.queryParams).then(response => {
        this.storeOptions = this.handleTree(response.data, "id");
      });
      if(parentId && parentId != ''){
        this.form.parentId = parentId;
      }
    }
  },
  watch:{
    'form.deptId':{
      handler(newVal, oldVal) {
        this.getUsers();
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      form: {
        deptId:undefined,
        userId:undefined
      },
      // 表单校验
      rules: {
        name: [{
          required: true,
          message: "仓库名称不能为空",
          trigger: "blur"
        }],
        // storeCode: [{
        //   required: true,
        //   message: "仓库代码不能为空",
        //   trigger: "blur"
        // }],
        deptId: [{
          required: true,
          message: "所属机构不能为空",
          trigger: "blur"
        }],
        userId: [{
          required: true,
          message: "仓管员不能为空",
          trigger: "blur"
        }],
        provinceCode: [{
          required: true,
          message: "省代码不能为空",
          trigger: "blur"
        }],
        cityCode: [{
          required: true,
          message: "市代码不能为空",
          trigger: "blur"
        }],
        areaCode: [{
          required: true,
          message: "区县代码不能为空",
          trigger: "blur"
        }],
        address: [{
          required: true,
          message: "仓库位置不能为空",
          trigger: "blur"
        }],
        status: [{
          required: true,
          message: "状态不能为空",
          trigger: "change"
        }],
        type: [{
          required: true,
          message: "仓库级别不能为空",
          trigger: "change"
        }]
      },
      label: "",
      buttonLoading:false,
      placeholder: "",
      provinceOptions: [],
      cityOptions: [],
      areaOptions: [],
      countyOptions: [],
      userOptions:[],
      storeOptions:[],
      //地图相关参数
      title: "划定电子围栏",
      open: false,
      deptOptions: [],
      selectLon: "",//地址选择后获取的经度传参
      selectLat: "",//地址选择后获取的纬度传参
      editStatus:true,//判断围栏是否处于编辑状态
      path:'',//围栏包含的点位传参
    };
  },
  methods: {
    getAreaList(parentId, level) {
      listSysArea(Object({ parentId: parentId, levels: level })).then(
        (response) => {
          if (level == 1) {
            this.provinceOptions = response.data;
          } else if (level == 2) {
            this.cityOptions = response.data;
          } else if (level == 3) {
            this.areaOptions = response.data;
          } else if (level == 4) {
            this.countyOptions = response.data;
          }
        }
      );
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then((response) => {
        this.deptOptions = response.data;
      });
    },//管理员信息
    getUsers(){
      listUser({'userType':'sys_user','deptId':this.form.deptId}).then(response => {
        this.userOptions = response.rows
      })
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        name: undefined,
        deptId: undefined,
        userId: undefined,
        province: undefined,
        city: undefined,
        area: undefined,
        provinceCode: undefined,
        cityCode: undefined,
        areaCode: undefined,
        address: undefined,
        parentId: undefined,
        ancestors: undefined,
        status: undefined,
        lng: undefined,
        lat: undefined,
        createTime: undefined,
        createByu: undefined,
        updateTime: undefined,
        updateBy: undefined,
        delFlag: undefined,
        storeCode:undefined,
        storeNo:undefined
      };
      this.resetForm("form");
    },
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      };
    },
    /** 关闭按钮 */
    close() {
      const obj = {
        path: "/wms/wmsstore/store",
        query: { t: Date.now(), pageNum: this.$route.query.pageNum },
      };
      this.$tab.closeOpenPage(obj);
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          if (this.form.id != null) {
            updateStore(this.form)
              .then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.close();
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          } else {
            addStore(this.form).then((response) => {
                this.$modal.msgSuccess("添加成功");
                this.close();
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          }
        }
      });
    },
    //详细地址和地图操作
    getPosition(val) {
      if ("" != val && undefined != val && null != val) {
        this.form.address = val.full;
        console.info("val",val);
        if (
          null != val &&
          undefined != val &&
          undefined != val.location &&
          null != val.location
        ) {
          this.form.lng = String(val.location.lng);
          this.selectLon = this.form.lng;
          this.form.lat = String(val.location.lat);
          this.selectLat = this.form.lat;
        }
      } else {
        this.form.address = "";
        this.form.lng = "";
        this.form.lat = "";
      }
    },
    //关闭围栏编辑对话框
    cancel(){
        this.open = false;
    },
    clickMap(val) {
      this.form.address = val.address;
      this.form.lng = val.lng;
      this.form.lat = val.lat;
    }
  },
};
</script>
<style lang="scss" scoped>
.mainDiv {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.main_container {
  width: 100%;
  height: 100%;
}
.el-card {
  margin-bottom: 5px;
}
.el-footer {
  background-color: #ffffff;
  color: #333;
  text-align: right;
  line-height: 60px;
  border-top: 1px solid #e6ebf5;
  box-shadow: 0px 0px 10px #cdcdcd;
  z-index: 1000;
}
.footer-class {
  text-align: right;
  margin-top: 15px;
}
//顶部距离css
.topItem {
  margin-bottom: 0px;
}
.areaSelect {
  width: 100%;
  padding-right: 5px;
}
</style>
